import React, { useEffect, useRef } from 'react';
import { useState } from 'react';

export const InputFocus = () => {
    const inRef = useRef(null)

    const handle = () => {
        console.log(inRef.current);
        // 看是否有focus方法，没有的话就不调用
        inRef.current?.focus()
    }
    return (
        <>
            <input type='text' ref={inRef}></input>
            <button onClick={handle}>获取焦点</button>
        </>
    )
}

// 使用useRef为了保存上一次状态的值
// 一种方法可以用ref.current保存，另一种可以通过再声明个变量
export const Counter = () => {
    const [count, setCount] = useState(0)
    const[rty,setRty]=useState(null)
    // const pre = useRef(null)

    const handle = () => {
        // pre.current=count
        setCount(count+1)
        setRty(count)
    }
    return (
        <>
            <h1>新值是：{count},旧值是：{rty}</h1>
            <button onClick={handle}>+1</button>
        </>
    )
}


// 注意事项：1、useRef重新渲染的时候不会再次进行初始化 
// 2、ref.current 变化时不会导致组件重新渲染
// 3、不要把ref.current作为hook的依赖项，
export const RefTimer=()=>{
    const [count,setCount]=useState(0)
    const [visible,setVisble]=useState(false)
    const time=useRef(Date.now())
    console.log(time);
    
    const handle=()=>{
        time.current=Date.now()
        console.log(time.current);
        setVisble(true)
    }
    
    
    useEffect(()=>{
        console.log('组件重新渲染了');
    },[time.current])
    return <>
        <h1>count:{count}</h1>
        <h1>{time.current}</h1>
        {/* 一直是一个值 */}
        <button onClick={()=>setCount((pre)=>pre+1)}>+1</button>
        <button onClick={handle}>ref发生变化</button>
    </>
}



